<template>
  <PageWrapper dense contentFullHeight contentClass="flex">
    <div class="m-4 mr-0 overflow-hidden bg-white">
      <BasicTree
        title="部门列表"
        toolbar
        search
        treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
        :clickRowToExpand="false"
        :treeData="treeData"
        :fieldNames="{ key: 'id', title: 'deptName' }"
        @select="handleSelect"
      />
    </div>
    <!-- <div class="m-4 mr-0 overflow-hidden bg-white">
      <Tree :treeData="treeData">
        <template #title="{ deptName }">
          <span>{{ deptName }}</span>
        </template>
      </Tree>
    </div> -->
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { getDeptList } from '@/api/demo/system';
  import { PageWrapper } from '@/components/Page';
  import { BasicTree, TreeItem } from '@/components/Tree';
  import { onMounted, ref } from 'vue';

  const treeData = ref<TreeItem[]>([]);

  async function fetch() {
    treeData.value = (await getDeptList()) as unknown as TreeItem[];
  }

  function handleSelect(event: any[]) {
    console.log(event[0]);
  }

  onMounted(() => {
    fetch();
  });
</script>
